﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DiscountList.aspx.cs" Inherits="famails.BackEnd.Discount.DiscountList" MasterPageFile="~/Master.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="width: 100%; padding: 10px;">
        <!--start content 01-->
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border: 1px solid #333; margin-bottom: 10px; padding: 0px;">
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding: 10px 20px; background: #000; color: #fff; font-size: 18px; font-weight: bold; position: relative;">
                Danh sách thẻ khuyến mãi
            </div>
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding: 0px">
                <asp:Panel Visible="false" ID="pnError" runat="server">
                    <div class="error-box round col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto; padding: 10px;">
                        <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
                <asp:Panel Visible="false" ID="pnSuccess" runat="server">
                    <div class="confirmation-box round col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto; padding: 10px;">
                        <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
            </div>
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto; padding: 10px;">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding: 5px; padding-left: 0px; margin-bottom: 25px;">
                    <span for="simple-input" style="padding: 5px 10px; border: 1px solid #333; font-weight: bolder; font-size: 18px; text-transform: none"><span style="margin-right: 5px;" class="fa fa-search"></span>Tra cứu khuyến mãi</span>
                </div>
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding: 10px;">
                    <div class="col-md-2 col-lg-2 col-sm-3 col-xs-6" style="padding: 5px; line-height: 30px;">
                        Tên chương trình
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-3 col-xs-6" style="padding: 5px;">
                        <input id="txtName" class="form-control" type="text" style="border-radius: 0px; border: 1px solid #333;" />
                    </div>
                    <div class="col-md-2 col-lg-2 col-sm-3 col-xs-6" style="padding: 5px; line-height: 30px;">
                        Mã khuyến mãi
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-3 col-xs-6" style="padding: 5px;">
                        <input id="txtCode" class="form-control" type="text" style="border-radius: 0px; border: 1px solid #333;" />
                    </div>
<%--                <div class="col-md-2 col-lg-2 col-sm-3 col-xs-6" style="padding: 5px; line-height: 30px;">
                        Tên chương trình
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-3 col-xs-6" style="padding: 5px;">
                        <select id="txtName" class="form-control" type="text" style="border-radius: 0px; border: 1px solid #333;">
                            <option selected value="#">Danh sách sự kiện</option>    
                            <option value="1">Sự kiện 1</option>    
                        </select>
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6" style="padding: 5px; line-height: 30px;">
                        Mã khuyến mãi
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6" style="padding: 5px;">
                        <input id="txtCode" class="form-control" type="text" style="border-radius: 0px; border: 1px solid #333;" />
                    </div>--%>
                </div>
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding: 10px;">
                    <div class="col-md-1 col-lg-1 col-sm-3 col-xs-6" style="padding: 5px; line-height: 26px;">
                        Từ ngày
                    </div>
                    <div class="col-md-2 col-lg-3 col-sm-3 col-xs-6" style="padding: 5px;">
                        <div id="txtFromDate"></div>
                    </div>
                    <div class="col-md-2 col-lg-2 col-sm-3 col-xs-6" style="padding: 5px; line-height: 26px;">
                        Đến ngày
                    </div>
                    <div class="col-md-2 col-lg-3 col-sm-3 col-xs-6" style="padding: 5px;">
                        <div id="txtToDate"></div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 pull-right" style="padding: 10px;">
                    <div id="btnSearch" style="float: left; background: #333; color: #fff; text-align: center; padding: 6px 15px; border-radius: 0px; border: 1px solid #fff;" class="btn col-xs-6 col-lg-2 col-sm-3 col-md-2">
                        <span class="fa fa-desktop" style="margin-right: 10px;"></span>Lọc dữ liệu 
                    </div>
                    <div id="btnExportExcel" style="float: left; background: #333; color: #fff; text-align: center; padding: 6px 15px; border-radius: 0px; border: 1px solid #fff;" class="btn col-xs-6 col-lg-2 col-sm-3 col-md-2">
                        <span class="fa fa-mail-forward" style="margin-right: 10px;"></span>Xuất dữ liệu 
                    </div>
                    <a href="Discount.aspx" style="float: left; margin-right: 10px; background: #333; color: #fff; text-align: center; padding: 6px 15px; border-radius: 0px; border: 1px solid #fff;" class="btn col-xs-12 col-lg-2 col-sm-3 col-md-3"><span class="fa fa-plus" style="margin-right: 10px;"></span>Thêm mới khuyến mãi</a>


                </div>
            </div>

            
            <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 " style="padding: 0px;">
                <div id='jqxWidget' style="width: 100% !important; font-size: 13px; font-family: Verdana; float: left;"></div>
                <div id="jqxgrid" style="width: 100% !important;"></div>
            </div>

            <div id="popupWindow">
                <div>
                    Xóa khuyễn mãi
                </div>
                <div style="overflow: hidden;">
                    <p>
                        Bạn có chắc là muốn xóa khuyễn mãi này không?
                    </p>
                    <button id="del">
                        Yes</button>
                    <button id="cancel">
                        No</button>
                </div>
            </div>
        </div>
    </div>
      <script type="text/javascript">
          jQuery(function ($) {

              $("#txtFromDate").jqxDateTimeInput({ width: '120px', height: '25px' });
              $("#txtToDate").jqxDateTimeInput({ width: '120px', height: '25px' });

              $("#btnExportExcel").click(function () {
                  $("#jqxgrid").jqxGrid('exportdata', 'xls', 'discountlist');
              });

              $("#btnSearch").click(function () {
                  var url = "DiscountList.aspx/Search";
                  $("#jqxgrid").jqxGrid('showloadelement');
                  var postValue = "{name:'" + $('#txtName').val() + "',code:'" + $('#txtCode').val() + "', from:'" + $('#txtFromDate').jqxDateTimeInput("getText") + "', to:'" + $('#txtToDate').jqxDateTimeInput("getText") + "'}";
                  // alert(postValue);
                  $.ajax({
                      type: "POST",
                      url: url,
                      data: postValue,
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: function (data) {
                          var source =
                  {
                      datatype: "json",
                      datafields: [
                          { name: 'DiscountID', type: 'int' },
                          { name: 'DiscountCode', type: 'string' },
                          { name: 'DiscountName', type: 'string' },
                            { name: 'DiscountType', type: 'string' },
                            { name: 'MinAmount', type: 'decimal' },
                            { name: 'DiscountValue', type: 'decimal' },
                            { name: 'Notes', type: 'string' },
                            { name: 'ToDate', type: 'date' },
                            { name: 'FromDate', type: 'date' },
                            { name: 'CreateDate', type: 'date' },
                          { name: 'NumberOfCode', type: 'int' },
                          { name: 'NumberOfUse', type: 'int' },
                          { name: 'TotalValue', type: 'decimal' }
                      ],
                      id: 'DiscountID',
                      localdata: data,
                      pager: function (pagenum, pagesize, oldpagenum) {
                      }
                  };
                          var dataAdapter = new $.jqx.dataAdapter(source);
                          $("#jqxgrid").jqxGrid(
                          {
                              width: $('#jqxWidget').width(),
                              source: dataAdapter,
                              selectionmode: 'multiplerowsextended',
                              sortable: true,
                              pageable: true,
                              autoheight: true,
                              columnsresize: true,
                              scrollmode: 'logical',
                              columns: [
                                { text: 'Khuyến mãi', datafield: 'DiscountName' },
                                { text: 'Loại', datafield: 'DiscountType',width:60 },
                                { text: 'Giá tối thiểu', datafield: 'MinAmount', width: 100, cellsformat: 'number', cellsalign: 'right' },
                                { text: 'Tổng SL', datafield: 'NumberOfCode', width: 80, cellsformat: 'number', cellsalign: 'right' },
                                { text: 'SL đã dùng', datafield: 'NumberOfUse', width: 80, cellsformat: 'number', cellsalign: 'right' },
                                { text: 'Tổng tiền', datafield: 'TotalValue', cellsformat: 'number', cellsalign: 'right',width:100 },
                                { text: 'Từ ngày', datafield: 'FromDate', width: 100, cellsformat: 'dd/MM/yyyy', cellsalign: 'center' },
                                { text: 'Đến ngày', datafield: 'ToDate', width: 100, cellsformat: 'dd/MM/yyyy', cellsalign: 'center' },
                                { text: 'Ngày tạo', datafield: 'CreateDate', width: 100, cellsformat: 'dd/MM/yyyy', cellsalign: 'center' },
                                {
                                    text: 'Danh sách',  columntype: 'button', width: 90, cellsrenderer: function () {
                                        return "Danh sách";
                                        //return '<input type="image" style="margin-left: 5px;" height="30" width="30" src="../resource/images/delete-icon.png"/>';
                                    }, buttonclick: function (row) {
                                        editrowindex = row;
                                        var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "DiscountID");
                                        window.open('DiscountDetail.aspx?Id=' + id);
                                    }
                                },
                                {
                                    text: 'Chỉnh sửa', datafield: 'Edit', columntype: 'button', width: 90, cellsrenderer: function () {
                                        return "Chỉnh sửa";
                                        //return '<input type="image" style="margin-left: 5px;" height="30" width="30" src="../resource/images/delete-icon.png"/>';
                                    }, buttonclick: function (row) {
                                        editrowindex = row;
                                        var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "DiscountID");
                                        window.location = 'Discount.aspx?Id=' + id;
                                    }
                                },
                                 {
                                     text: 'Xóa', datafield: 'Delete', columntype: 'button', width: 50, cellsrenderer: function () {
                                         return "Xóa";
                                     }, buttonclick: function (row) {
                                         // open the popup window when the user clicks a button.
                                         id = $("#jqxgrid").jqxGrid('getrowid', row);
                                         var offset = $("#jqxgrid").offset();
                                         $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                         // show the popup window.
                                         $("#popupWindow").jqxWindow('show');
                                     }
                                 }]
                          });

                      }
                  });
              });
              $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
              $("#del").jqxButton({ theme: theme });
              $("#cancel").jqxButton({ theme: theme });
              $("#del").click(function () {
                  $.ajax({
                      type: "POST",
                      url: "DiscountList.aspx/Delete",
                      data: "{id:" + id + "}",
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: function (data) {
                          $('#jqxgrid').jqxGrid('deleterow', id);
                          $("#popupWindow").jqxWindow('hide');
                      },
                      error: function (request, status, error) {
                          alert('Khuyến mãi này đã được sử dụng, bạn không thể xóa!');
                          $("#popupWindow").jqxWindow('hide');
                      }
                  });
              });
              $("#cancel").click(function () {
                  $("#popupWindow").jqxWindow('hide');
              });
              $('#btnSearch').trigger('click');
          });
    </script>
</asp:Content>
